<template>
  <div>
    <v-row :gutter="16" :style="{ margin: '12px 5px' }">
      <!-- 导航 -->
      <v-col class="gutter-row" span="8">
        <v-breadcrumb>
          <v-breadcrumb-item>
            <v-icon type="home"></v-icon>
            <router-link :to="{ name: 'Index' }">首页</router-link>
          </v-breadcrumb-item>
          <v-breadcrumb-item>站长推荐</v-breadcrumb-item>
        </v-breadcrumb>
      </v-col>
    </v-row>
    <!-- 数据 -->
    <div v-for="(recommendation, $index) in recommendations" :key="$index" style="margin: 20px 250px;">
      <v-card class="recommendation" :title="recommendation.book.name" :bordered="true">
        <div slot="extra">
          <v-row :gutter="16">
            <v-col class="gutter-row" span="6">
              <router-link :to="{ name: 'BookChapters', params: { bookId: recommendation.book.id } }">{{ recommendation.book.name }}</router-link>&nbsp;&nbsp;
              <v-tag :color="statusPick(recommendation.book.status)">{{ recommendation.book.status }}</v-tag>
            </v-col>
            <v-col class="gutter-row" span="2" offset="16">
              <v-tag :color="colorPick(recommendation.book.type)">{{ recommendation.book.type }}</v-tag>
            </v-col>
          </v-row>
        </div>
        <div>
          <v-row :gutter="16">
            <v-col class="gutter-row" span="4">
              <img width="100%" height="100%" :src="recommendation.book.image">
            </v-col>
            <v-col class="gutter-row" span="20">{{ recommendation.reason }}</v-col>
          </v-row>
          <v-row :gutter="16">
            <v-col class="gutter-row" span="8">
              <v-tooltip content="推荐指数" placement="bottom">
                <v-rate v-model="recommendation.value" :disabled="disabled"></v-rate>
              </v-tooltip>
            </v-col>
            <v-col class="gutter-row" span="4" offset="12">{{ recommendation.book.author }} ( {{ recommendation.book.updateAt | fmt }} )</v-col>
          </v-row>
        </div>
      </v-card>
    </div>
    <!-- 滚动加载 -->
    <infinite-loading :identifier="infiniteId" @infinite="loadMore" style="margin-top: 20px;">
      <div slot="spinner">拼命加载中...</div>
      <div slot="no-more">没有更多内容啦:(</div>
      <div slot="no-results">没数据啦:(</div>
    </infinite-loading>
    <!-- 回到顶部 -->
    <v-back-top></v-back-top>
  </div>
</template>

<script>
import moment from 'moment'

const colors = {
  "玄幻魔法": "green",
  "武侠修真": "cyan",
  "现代都市": "yellow",
  "言情小说": "pink",
  "历史军事": "blue",
  "游戏竞技": "purple",
  "科幻灵异": "#108ee9",
  "耽美小说": "red",
  "同人小说": "orange",
  "其他类型": "#87d068"
}

const statusArr = {
  "连载中": "#f50",
  "已完成": "#000"
}

export default {
  name: "Recommendation",
  data () {
    return {
      infiniteId: +new Date(),
      page: 0,
      recommendations: [],
      typeColors: [
        { value: "green", label: "玄幻魔法" },
        { value: "cyan", label: "武侠修真" },
        { value: "yellow", label: "现代都市" },
        { value: "pink", label: "言情小说" },
        { value: "blue", label: "历史军事" },
        { value: "purple", label: "游戏竞技" },
        { value: "#108ee9", label: "科幻灵异" },
        { value: "red", label: "耽美小说" },
        { value: "orange", label: "同人小说" },
        { value: "#87d068", label: "其他类型" },
      ],
      disabled: true
    };
  },
  filters: {
    fmt(timestamp) {
      return moment(timestamp).fromNow()
    }
  },
  methods: {
    loadMore($state) {
      const params = {
        page: this.page,
        size: 10,
        sort: "value,desc"
      };
      this.$get("/recommendation", params, true).then(data => {
        if (data.content.length) {
          this.page += 1;
          this.recommendations.push(...data.content);
          $state.loaded();
        } else {
          $state.complete();
        }
      });
    },
    colorPick(type) {
      let color = colors[type]
      if (color) {
        return color
      }
      return "#87d068"
    },
    statusPick(status) {
      let color = statusArr[status]
      if (color) {
        return color
      }
      return "gray"
    },
  }
};
</script>

<style>
.recommendation .ant-card-extra {
  width: 100%;
}
.recommendation .ant-card-head-title {
  display: none;
}
.recommendation .ant-card-extra {
  float: left;
}
</style>
